 <template>
   <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      :size="formSize"
    >
	<div class="login-container">
	<header class="title-section">
	    <img src="@/assets/jhk-1719213427217.jpg" alt="背景图片" class="image"/>
	    <h1>东软环保公众监督平台</h1>
	    <h2>———公众监督员端———</h2>
	</header>
	<div class="login-box">
      <el-form-item  prop="userName"  >
        <el-input v-model="ruleForm.userName" placeholder="请输入手机号" class="login-input" >
			<template #prefix>
			    <el-icon><User /></el-icon>
			</template>
		</el-input>
      </el-form-item>
      <el-form-item  prop="password" >
        <el-input v-model="ruleForm.password" placeholder="请输入登录密码" class="login-input" show-password ="true">
		<template #prefix>
			<el-icon><Lock /></el-icon>
		</template>
		</el-input>
      </el-form-item>
      <el-form-item>
		  <div class="register-link">
		        还没有账号？<router-link to="/supervisor/register">立即注册</router-link>
		      </div>
      </el-form-item>
	  <el-button type="primary" @click="submitForm" class="login-button">
	    登录
	  </el-button>
	    </div>
		</div>
    </el-form>
	</template>

<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
import qs from 'qs'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const formSize = ref('default')
const ruleFormRef = ref()
let ruleForm = reactive({
  userName: '',
  password: '',
})
let myrules=reactive({
		userName:[{
			required:true,
			trigger:'blur',
			message:'用户名不能为空'
		}],
		password:[{
			required:true,
			trigger:'blur',
			message:'密码为必填项'
		}]
	})
let formRef = ref(null)
	let router=useRouter()
	let submitForm = () => {
		/*router.push({
			path:'/supervisor/index'
			});*/
	      ruleFormRef.value.validate((valid) => {
	        if (valid) {
				//请求后台
				axios.post("http://localhost:8085/supervisor/login",
				{

						phoneNum:ruleForm.userName,
						password:ruleForm.password

				})
				.then(res=>{
					//用户登录成功，向sessionStorage存储一个标识

					let result=res.data
					console.log(result);
					if(result.code==1){
						sessionStorage.setItem("isLogin",'ok')
            sessionStorage.setItem("supervisor",JSON.stringify(result.data))
            console.log(sessionStorage)
            console.log(JSON.parse(sessionStorage.getItem('supervisor')).supervisorId)
						//ElMessage.success('登录成功!');
						//跳转到首页
						router.push({
							path:'/supervisor/index'
							});
					}else{
						//提示失败原因
						ElMessage.error(result.message)
					}

				})
				//如果后台后台返回成功
				//就提示登录成功，跳转到后台管理首页
				//如果登录失败，提示失败原因，不跳转
	        } else {
				ElMessage.error('登录失败!');
				return false;
	        }
	      })
	    }
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e0f7fa; /* 蓝绿色背景色 */
   min-height: 100vh;
}
.title-section {
  text-align: center;
  
}

h1, h2 {
  color: green;
}
.login-box {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 80%;
  margin-bottom: 30px;
  padding: 20px;
}
.register-link {
  margin-bottom: 10px;
}
.login-button {
  background-color: #70b0bc; /* 蓝绿色按钮 */
  border-color: #00796b;
  width: 100%;
  height: 50px;
  border-radius: 8px;
}
.login-input {
	height: 50px;
	border-radius: 95px;
}
.image {
    display: block;
    margin: auto;
	width: 100%;
    height: auto;
}
</style>
